<style>
  .os_title {
    font-size: 20pt;
    font-weight: bold;
    text-decoration: underline;
    color: #FFF;
  }
  .os_title:hover {
    color : #fff;
  }
  .os_image {
    width: 130px;
    height: 200px;
    margin-left: 40px;
    margin-top: 100px;
    cursor: pointer;
    display: inline;
    opacity : 0.5;
  }
  .os_image:hover {
    opacity : 1;
  }
  .os_image_cont {
    height : 300px;
    width : 100%;
    /* background: url('images/os_icon_bg.png') no-repeat center center fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;*/
  }
  #os_icon_bg {
    display: absolute;
  }
  #os_img_3 {
    float :right;
  }
</style>
<div class="os_outer_cont">
  <div class="os_image_cont">
    <!--<img id="os_icon_bg" src="images/os_icon_bg.png" width="100%" height="300" alt="" />-->
    <img id="os_img_1" src="images/os_dropbox.png" alt="" class="os_image" />
    <img id="os_img_2" src="images/os_weixin.png" alt="" class="os_image" />
    <img id="os_img_3" src="images/os_new.png" alt="" class="os_image" />
  </div>
  <div class="os_link_cont"></div>
</div>
<div id="os_details_1" class="os_details">
  <p><a class="os_title" href="https://code.google.com/p/dropbox-as3/">Dropbox-as3 on Google Code</a>

  </p>
  <p id="os_desc">ActionScript 3 version of dropbox core API, listedon the dropbox official website. The project is released under MIT licence intended to be useful both as reference documentation and for regular use.
    <br />The project is the solution of drobox API on Flash. I have maintained this project for nearly 2 years now and now it’s much more stable. It’s fun to maintain such kind of opensource project, issue management, various kinds of issues, teach other’s on
    how to use it (through there are already documents)... It’s really excited to be an opensource contributor.</p>
</div>
<div id="os_details_2" class="os_details hide">
  <p><a href="https://github.com/grossopa/weixin-mp-java" class="os_title">微信公众平台接口实现</a>
  </p>
</div>
<div id="os_details_3" class="os_details hide">
  <p class="os_title" style="text-decoration: none;">Keep forwarding...</p>
</div>
<script type="text/javascript">
  function os_init()
  {
    $('#os_img_1').bind('click', function()
    {
      $('.os_details').addClass('hide');
      $('#os_details_1').removeClass('hide');
    });
    $('#os_img_2').bind('click', function()
    {
      $('.os_details').addClass('hide');
      $('#os_details_2').removeClass('hide');
    });
    $('#os_img_3').bind('click', function()
    {
      $('.os_details').addClass('hide');
      $('#os_details_3').removeClass('hide');
    });

  }
  os_init();
</script>
